<template>
	<view>
		<view class="u-m-t-20 cbg-white">
			<view class="cflex-c u-p-25">
				<view class="cflex-r u-m-b-25" style="justify-content: space-between;align-items: center;"
				>
					<view style="font-weight: bold;">
						<text>当前定位</text>
					</view>
					<view class="u-m-r-10 cflex-r-c">
						<view class="u-line-1" v-if="userInfo.address!==''" 
						style="width:500rpx;text-align:right;">
						{{userInfo.address}}</view>
						<text v-else>获取定位失败</text>
						<image style="width: 14rpx;height: 24rpx; padding-left: 20rpx;"
							src="../../static/qieTu/arrow-right.png"></image>
					</view>

				</view>
				<view class="u-m-b-25" style="width: 100%;">
					<u-divider color="#D5D4D4" :use-slot="false" half-width="350"></u-divider>
					<view class="cflex-r u-m-b-25" style="padding-top: 20rpx;">
						<view style="font-weight: bold;">
							<text>服务范围</text>
						</view>
						<view
							style="padding-left: 10rpx;padding-top: 5rpx; font-size: 25rpx;text-align: center; color: #AAAAAA;">
							<text>为保障接单质量 请设置5-25KM内(自动保存)</text>
						</view>
					</view>
				</view>
				<template>
					<view>
						<view class="uni-padding-wrap">
							<view class="uni-title"></view>
						</view>
						<picker-view :indicator-style="indicatorStyle" :value="indexs.glIndex"
							@change="bindChange"  class="picker-view">
							<!-- @pickend="upFanWei()" -->
							<picker-view-column>
								<view class="item" v-for="(item,index) in gongLiList" :key="index">{{item}}KM</view>
							</picker-view-column>
						</picker-view>
					</view>
				</template>
			</view>

		</view>

		<view class="u-m-t-20 cbg-white">
			<view class="cflex-c u-p-25">
				<view class="cflex-r u-m-b-25" style="justify-content: space-between;align-items: center;">
					<view style="font-weight: bold;">
						<text>开始时间</text>
						<view style="font-size: 20rpx; color:#B4B4B4;padding-top: 15rpx;">
							<text>请选择开始时间(自动保存)</text>
						</view>
						<picker-view :indicator-style="indicatorStyle"
							@change="startTimeChange"  class="picker-view"
							:value="indexs.startIndex">
							<!-- @pickend="upStartTime()" -->
							<picker-view-column>
								<view class="item" v-for="(item,index) in timeList" :key="index">{{item}}:00</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
				<view style="font-weight: bold;">
					<text>结束时间</text>
				</view>
				<view style="font-size: 20rpx;color: #B8B8B8;padding-top: 20rpx;"
				@tap='fanwei()'>
					<text>请选择结束时间(自动保存)</text>
				</view>
				<picker-view :indicator-style="indicatorStyle" :value="indexs.endIndex"
					@change="endTimeChange"  class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in timeList" :key="index">{{item}}:00</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				gongLiList:[],//服务范围(单位:千米)
				indexs:{glIndex:[0],startIndex:[0],endIndex:[0]},//表示当前选中的序号
				timeList:[],//时间列表
				timers:{server:0,start:0,end:0},//用于防抖,server用于服务范围，start用于开始时间，end用于结束时间
				indicatorStyle: `height: 20px;`,
				userInfo:{lng:"",lat:"",scope:"",start:"",end:"",address:""},//用户信息
			}
		},
		onReady() {
			for (var i = 5; i < 26; i++) {
				this.gongLiList.push(i)
			}
			for(var i=0;i<=23;i++){
				if(i<=9){
					this.timeList.push("0"+i);
				}else {
					this.timeList.push(i);
				}
			}
		},
		onLoad() {
			this.getLocation();//获取位置
			this.httpRequest();//获取数据
		},
		onShow() {
			
		},
		methods: {
			httpRequest(){//获得初始化数据
				this.$request("worker/other/selectWorker").then(res => {
					let st=res.data.starTime!==""?parseInt(res.data.starTime.split(':')[0]):0;
					let et=res.data.endTime!==""?parseInt(res.data.endTime.split(':')[0]):23;
					let juLi=res.data.scope!==""?parseInt(res.data.scope)-5:0;
					setTimeout(()=>{  //初始化结束时间，只能使用异步的方式
						this.indexs.startIndex=[st];
						this.indexs.endIndex=[et];
						this.indexs.glIndex=[juLi];
					},300);
				});
			},
			bindChange: function(e) {//公里数更改
				this.indexs.glIndex = e.detail.value;
				this.upFanWei();
			},
			startTimeChange:function(e){//开始时间更改
				this.indexs.startIndex=e.detail.value;
				this.upStartTime();
			},
			endTimeChange:function(e){//结束时间更改
				this.indexs.endIndex=e.detail.value
				this.upEndTime();
			},
			getLocation(){//获得位置
				this.userInfo.address=uni.getStorageSync('address');
				this.userInfo.cityName=uni.getStorageSync('city')
				let obj={cityName:this.userInfo.cityName}
				this.$request("worker/other/updateWorker",obj).then(res => {
					console.log("update",res)
				});	    
			},
			upFanWei(){//上传服务范围
				clearTimeout(this.timers.server);
				this.timers.server=setTimeout(()=>{
					let obj={scope:this.gongLiList[this.indexs.glIndex]};
					this.$request("worker/other/updateWorker",obj).then(res => {
						console.log("update",res)
					});
				},100)
			},
			upStartTime(){//上传开始服务时间
				clearTimeout(this.timers.start);
				this.timers.start=setTimeout(()=>{
					let st=this.timeList[this.indexs.startIndex],et=this.timeList[this.indexs.endIndex];
					if(et>st || st==0)
					{
						let obj={starTime:st+":00"};
						this.$request("worker/other/updateWorker",obj).then(res => {
							console.log("update",res)
						});
					}else{//结束时间小于开始时间
						uni.showToast({
							title:"开始时间必须小于结束时间",
							icon:"none"
						})
					}
				},100)
			},
			upEndTime(){//上传服务结束时间
				clearTimeout(this.timers.end);
				this.timers.end=setTimeout(()=>{
					let st=this.timeList[this.indexs.startIndex],et=this.timeList[this.indexs.endIndex];
					if(et>st || (et==0 && st==0)){
						let obj={endTime:et+":00"};
						this.$request("worker/other/updateWorker",obj).then(res => {
							console.log("update",res)
						});
					}else{
						uni.showToast({
							title:"结束时间必须大于开始时间",
							icon:"none"
						})
					}
				},100)
			}
		}
	}
</script>

<style>
	.picker-view {
		width: 750rpx;
		height: 200rpx;
		margin-top: 10rpx;
	}

	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
</style>
